<template>
  <el-row :gutter="40">
    <el-col v-if="!form.id">
      <el-empty description="请选择左侧组织后操作" :image-size="100"></el-empty>
    </el-col>
    <template v-else>
      <el-col :lg="24">
        <h2>{{ form.name || "新增组织" }}</h2>
        <el-form
          :model="form"
          :rules="rules"
          ref="dialogForm"
          label-width="80px"
          label-position="left"
        >
          <el-form-item label="显示名称" prop="name">
            <el-input
              v-model="form.name"
              clearable
              placeholder="组织显示名字"
            ></el-input>
          </el-form-item>
          <el-form-item label="上级组织" prop="parentId">
            <el-cascader
              v-model="form.parentId"
              :options="departOptions"
              :props="departProps"
              :show-all-levels="false"
              placeholder="顶级组织"
              clearable
              disabled
            ></el-cascader>
          </el-form-item>
          <el-form-item label="是否启用" prop="state">
            <el-switch
              v-model="form.state"
              :active-value="1"
              :inactive-value="-1"
            ></el-switch>
          </el-form-item>
          <el-form-item>
            <el-button
              v-if="auth.edit"
              type="primary"
              @click="save"
              :loading="loading"
              >保 存</el-button
            >
          </el-form-item>
        </el-form>
      </el-col>
    </template>
  </el-row>
</template>

<script>
import scIconSelect from "@/components/scIconSelect";

export default {
  components: {
    scIconSelect,
  },
  props: {
    depart: { type: Object, default: () => {} },
  },
  data() {
    return {
      //按钮权限
      auth: {
        edit: this.$AUTH("depart.edit"),
      },
      form: {
        id: "",
        parentId: "",
        name: "",
        level: "",
        sort: "",
        state: "",
      },
      departOptions: [],
      departProps: {
        value: "id",
        label: "name",
        checkStrictly: true,
      },
      predefineColors: [
        "#ff4500",
        "#ff8c00",
        "#ffd700",
        "#67C23A",
        "#00ced1",
        "#409EFF",
        "#c71585",
      ],
      rules: [],
      apiListAddTemplate: {
        code: "",
        url: "",
      },
      loading: false,
    };
  },
  watch: {
    depart: {
      handler() {
        this.departOptions = this.treeToMap(this.depart);
      },
      deep: true,
    },
  },
  mounted() {},
  methods: {
    //简单化组织
    treeToMap(tree) {
      const map = [];
      tree.forEach((item) => {
        var obj = {
          id: item.id,
          parentId: item.parentId,
          name: item.name,
          children:
            item.children && item.children.length > 0
              ? this.treeToMap(item.children)
              : null,
        };
        map.push(obj);
      });
      return map;
    },
    //保存
    async save() {
      this.loading = true;

      var res = await this.$API.system.depart.save.post(this.form);
      this.loading = false;
      if (res.code == 200) {
        this.$message.success("组织保存成功");
      } else {
        this.$message.warning(res.message);
      }
      return res;
    },
    //表单注入数据
    setData(data, pid) {
      this.form = data;
      this.form.apiList = data.apiList || [];
      this.form.parentId = pid;
    },
  },
};
</script>

<style scoped>
h2 {
  font-size: 17px;
  color: #3c4a54;
  padding: 0 0 30px 0;
}
.apilist {
  border-left: 1px solid #eee;
}

[data-theme="dark"] h2 {
  color: #fff;
}
[data-theme="dark"] .apilist {
  border-color: #434343;
}
</style>
